<template>
	<Layout class="p-5 bg-white">
		<Form class="p-5" :model="customer" :label-width="80">
			<Row>
				<Col span="8">

				<FormItem class="w-100" label="顾客姓名">
					<Input v-model="customer.customerName" />

				</FormItem>
				<FormItem class="w-100" label="顾客电话">
					<Input v-model="customer.customerTelephone" />
				</FormItem>
				<FormItem class="w-100" label="车架号">
					<Input v-model="customer.customerFrameNo" />
				</FormItem>
				<FormItem class="w-100" label="车牌号">
					<Input v-model="customer.customerCarNo" />
				</FormItem>
				<FormItem class="w-100" label="订单状态">
					<Select v-model="customer.state" style="width:200px">
						<Option v-for="item in state" :value="item.value">{{ item.label }}</Option>
					</Select>
				</FormItem>
				</Col>
			</Row>

			<FormItem>
				<Button type="primary" @click="save()">保存</Button>
				<Button style="margin-left: 8px" @click="back()">返回</Button>
			</FormItem>
		</Form>


		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>


	</Layout>

</template>
<script>
	export default {
		data() {
			return {
				searchKey: {
					current: 1,
					size: 4,
					saleId: 33
				},

				customer: {
					customerName: "",
					customerTelephone: "",
					customerFrameNo: "",
					customerCarNo: "",
					state: "",
					saleId: "",

				},
				tableInfo: {
					currentPage: 1,
					total: 0,

					columnInfo: [{
							title: "产品类别",
							key: "productType",
							align: 'center',
						},
						{
							title: "产品名称",
							key: "productName",
							align: 'center',
						},
						{
							title: "购买数量",
							key: "num",
							align: 'center',
						},
						{
							title: "产品单价",
							key: "price",
							align: 'center',
						},
						{
							title: "汽车部位",
							align: 'center',
							key: "carPart",
						}
					],
					data: []
				},
				state: [{
						value: 1,
						label: '已下单'
					},
					{
						value: 2,
						label: '已出库'
					},
					{
						value: 3,
						label: '施工中'
					},
					{
						value: 4,
						label: '施工完成'
					},
					{
						value: 5,
						label: '已交付'
					},
					{
						value: 6,
						label: '已取消'
					}
				]
			}
		},

		created: function() {

			this.customer.saleId = this.$route.query.saleId,
				this.searchKey.saleId = this.$route.query.saleId,
				this.loadData1();
			this.loadData2();
			this.searchKey.current = 1;

		},

		methods: {

			search: function() {
				this.searchKey.current = 1;
				this.loadData2();
			},


			loadData1: function() { //读取信息
				this.http.get({
					url: "/sale_order_header/sale_order/info?saleId=" + this.searchKey.saleId,
				}).then(res => {

					this.customer.customerName = res.sale_order_header.customerName;
					this.customer.customerTelephone = res.sale_order_header.customerTelephone;
					this.customer.customerFrameNo = res.sale_order_header.customerFrameNo;
					this.customer.customerCarNo = res.sale_order_header.customerCarNo;
					this.customer.state = res.sale_order_header.state;
				});
			},
			loadData2: function() { //读取信息
				this.http.get({
					url: "/sale-order-item/sale_order/info/g",

					param: this.searchKey,

				}).then(data => {
					this.tableInfo.total = data.total,
						this.tableInfo.currentPage = data.current,
						this.tableInfo.data = data.records,
						this.tableInfo.pageSize = data.size;
				});
			},



			pageSearch: function(changedPage) {

				this.searchKey.current = changedPage;
				this.loadData2();
			},


			save: function() { //保存修改信息

				this.http.put({
					url: "/sale_order_header/info",
					param: {
						customerName: this.customer.customerName,
						customerTelephone: this.customer.customerTelephone,
						customerFrameNo: this.customer.customerFrameNo,
						customerCarNo: this.customer.customerCarNo,
						state: this.customer.state,
						saleId: this.customer.saleId,


					}
				}).then(res => {
					this.message.info("修改成功");
					this.$tabs.close();
				})
			},


			back: function() { //返回跳转
				this.message.info("已返回");
				this.$tabs.close();
			}
		}

	}
</script>

<style>

</style>
